<template>
  <div id="stationMap" style="overflow: auto;padding: 0;">
    <!-- 仓储 2018/1/24 11:59 zhangQ -->
    <Row style="background: #13293b">
      <!--顶部数据统计-->
      <topHeader v-if="showModel.topHeaderShow"></topHeader>
      <stationInfoDetail v-if="showModel.stationInfoDetailShow" :currentStationInfo="currentStationPoint" :color="currentStationPointColor"></stationInfoDetail>
      <i-col :span="24">
        <!-- 场站地图 -->
        <div v-if="showModel.mapShow" id="allmap" class="stationMap" :style="{height: layoutHeight+'px'}"></div>
        <!-- 搜索按钮 -->
        <searchInput v-if="showModel.searchInputShow" @clickSearch="searchStation"></searchInput>
        <!-- 地图标题 -->
        <mapTitle v-if="showModel.mapTitleShow"></mapTitle>
        <!--筛选数据-->
        <selectData v-if="showModel.selectDataShow" @selectStation="searchStation"></selectData>
        <!--货运中心数据展示-->
        <stationFreesDataTable v-if="showModel.stationFreesDataTableShow"></stationFreesDataTable>
        <!--单个货运中心数据展示-->
        <freightCenterDataTable :stationCenterName="currentStationCenter" v-if="showModel.freightCenterDataTableShow"></freightCenterDataTable>
        <!--场站信息-->
        <stationInfo v-if="showModel.stationInfoShow" :currentStationInfo="currentStationPoint" :color="currentStationPointColor" :billList="currentBillList" @showStationInfoDetail="stationInfoDetailShow"
                     @closeInfo="closeStationInfo"></stationInfo>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import hw from '@components/common/heightAndWidth'
  import {getStationInfoListInMap, getStationInfoList, getAllStationBillList, getStationMainOrderList} from '@api/lightStation/station'
  import topHeader from './components/topHeader.vue'
  import mapTitle from './components/mapTitle.vue'
  import freightCenterDataTable from './components/freightCenterDataTable.vue'
  import searchInput from './components/searchInput.vue'
  import selectData from './components/selectData.vue'
  import stationFreesDataTable from './components/stationFreesDataTable.vue'
  import stationInfo from './components/stationInfo.vue'
  import stationInfoDetail from './components/stationInfoDetail.vue'
  import {SquareOverlay, ZoomControl} from './js/draw'
  import {bdEncrypt} from './js/coordinateTransformation'
  import {MP} from '@components/bmap'
  import moment from 'moment'
  import _ from 'lodash'

  export default {
    name: 'storage',
    data () {
      let endTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 23:59:59'
      let dayStartTime = moment().subtract(1, 'days').format('YYYY-MM-DD') + ' 00:00:00'
      let monthStartTime = moment().subtract(1, 'days').month(moment().month() - 1).format('YYYY-MM-DD') + ' 00:00:00'
      let yearStartTime = moment().subtract(1, 'days').year() - 1 + '-' + moment().month(moment().month()).format('MM-DD') + ' 00:00:00'
      let layoutHeight = 500
      let mapStationList = []
      let showModel = {
        topHeaderShow: true,
        stationInfoDetailShow: false,
        searchInputShow: true,
        mapTitleShow: true,
        selectDataShow: true,
        stationFreesDataTableShow: true,
        freightCenterDataTableShow: false,
        stationInfoShow: false,
        mapShow: true
      }
      let mapCenterPoint = [87.606043, 43.832012]
      let BMapStyle = [
        {
          'featureType': 'water',
          'elementType': 'all',
          'stylers': {
            'color': '#021019'
          }
        },
        {
          'featureType': 'highway',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'highway',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#147a92'
          }
        },
        {
          'featureType': 'arterial',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'arterial',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#0b3d51'
          }
        },
        {
          'featureType': 'local',
          'elementType': 'geometry',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'land',
          'elementType': 'all',
          'stylers': {
            'color': '#08304b'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#08304b'
          }
        },
        {
          'featureType': 'subway',
          'elementType': 'geometry',
          'stylers': {
            'lightness': -70
          }
        },
        {
          'featureType': 'building',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.fill',
          'stylers': {
            'color': '#857f7f'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.stroke',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'building',
          'elementType': 'geometry',
          'stylers': {
            'color': '#022338'
          }
        },
        {
          'featureType': 'green',
          'elementType': 'geometry',
          'stylers': {
            'color': '#062032'
          }
        },
        {
          'featureType': 'boundary',
          'elementType': 'all',
          'stylers': {
            'color': '#1e1c1c'
          }
        },
        {
          'featureType': 'manmade',
          'elementType': 'geometry',
          'stylers': {
            'color': '#022338'
          }
        },
        {
          'featureType': 'poi',
          'elementType': 'all',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.icon',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.fill',
          'stylers': {
            'color': '#2da0c6',
            'visibility': 'on'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'labels.text.stroke',
          'stylers': {
            'color': '#00ffffff',
            'weight': '1.4',
            'visibility': 'on'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#ff0000ff',
            'hue': '#00ffff',
            'weight': '1.3',
            'visibility': 'on'
          }
        }
      ]
      let stationColorAll = {
        wlmq: '#44C0FF',
        hm: '#FB943A',
        kel: '#A1BF50',
        ks: '#DD2037',
        kt: '#24C4A0',
        hrgs: '#A889F9',
        alsk: '#F3E886'
      }
      let map = {}
      let allStationBillDay = {}
      let allStationBillMonth = {}
      let allStationBillYear = {}
      let currentStationPoint = {}
      let currentStationPointColor = ''
      let currentBillList = {}
      let currentStationCenter = ''
      let datas = {
        currentStationCenter,
        currentStationPoint,
        currentStationPointColor,
        allStationBillDay,
        allStationBillMonth,
        allStationBillYear,
        endTime,
        dayStartTime,
        monthStartTime,
        yearStartTime,
        layoutHeight,
        mapStationList,
        mapCenterPoint,
        BMapStyle,
        stationColorAll,
        showModel,
        map,
        currentBillList
      }
      return datas
    },
    methods: {
      closeStationInfo () {
        if (this.currentStationCenter) {
          this.showModel = {
            topHeaderShow: true,
            stationInfoDetailShow: false,
            searchInputShow: true,
            mapTitleShow: true,
            selectDataShow: true,
            stationFreesDataTableShow: false,
            freightCenterDataTableShow: true,
            stationInfoShow: false,
            mapShow: true
          }
        } else {
          this.showModel = {
            topHeaderShow: true,
            stationInfoDetailShow: false,
            searchInputShow: true,
            mapTitleShow: true,
            selectDataShow: true,
            stationFreesDataTableShow: true,
            freightCenterDataTableShow: false,
            stationInfoShow: false,
            mapShow: true
          }
        }
      },
      stationInfoDetailShow () {
        this.showModel.stationInfoDetailShow = true
      },
      searchStation (param) {
        if (param.free) {
          this.currentStationCenter = param.free
          this.showModel = {
            topHeaderShow: true,
            stationInfoDetailShow: false,
            searchInputShow: true,
            mapTitleShow: true,
            selectDataShow: true,
            stationFreesDataTableShow: false,
            freightCenterDataTableShow: true,
            stationInfoShow: false,
            mapShow: true
          }
        } else if (param.free === '') {
          this.showModel = {
            topHeaderShow: true,
            stationInfoDetailShow: false,
            searchInputShow: true,
            mapTitleShow: true,
            selectDataShow: true,
            stationFreesDataTableShow: true,
            freightCenterDataTableShow: false,
            stationInfoShow: false,
            mapShow: true
          }
        } else {
          this.showModel = {
            topHeaderShow: true,
            stationInfoDetailShow: false,
            searchInputShow: true,
            mapTitleShow: true,
            selectDataShow: true,
            stationFreesDataTableShow: false,
            freightCenterDataTableShow: false,
            stationInfoShow: false,
            mapShow: true
          }
        }
        getStationInfoListInMap(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.drawMyBmap(res.data.data)
          }
        })
      },
      getStationMainOrderListInfoDay () {
        let paramDay = {startTime: this.dayStartTime, endTime: this.endTime}
        let allStationBillDay = {}
        let allStationInfoDay = {}
        getAllStationBillList(paramDay).then(res => {
          if (res.data.isSuccess === 1) {
            allStationBillDay = res.data.data
            getStationMainOrderList(paramDay).then(res => {
              if (res.data.isSuccess === 1) {
                allStationInfoDay = res.data.data
                _.forEach(allStationBillDay, (item, key) => {
                  if (item.cnt <= 0) {
                    allStationBillDay[key] = allStationInfoDay[key]
                  }
                })
                let obj = {
                  'allStationBillDay': allStationBillDay,
                  'time': moment().format()
                }
                obj = JSON.stringify(obj)
                localStorage.setItem('allStationBillDay', obj)
                this.allStationBillDay = allStationBillDay
              }
            })
          }
        })
      },
      getStationMainOrderListInfoMonth () {
        let allStationBillMonth = {}
        let allStationInfoMonth = {}
        let paramMonth = {startTime: this.monthStartTime, endTime: this.endTime}
        getAllStationBillList(paramMonth).then(res => {
          if (res.data.isSuccess === 1) {
            allStationBillMonth = res.data.data
            getStationMainOrderList(paramMonth).then(res => {
              if (res.data.isSuccess === 1) {
                allStationInfoMonth = res.data.data
                _.forEach(allStationBillMonth, (item, key) => {
                  if (item.cnt <= 0) {
                    allStationBillMonth[key] = allStationInfoMonth[key]
                  }
                })
                let obj = {
                  'allStationBillMonth': allStationBillMonth,
                  'time': moment().format()
                }
                obj = JSON.stringify(obj)
                localStorage.setItem('allStationBillMonth', obj)
                this.allStationBillMonth = allStationBillMonth
              }
            })
          }
        })
      },
      getStationMainOrderListInfoYear () {
        let allStationBillYear = {}
        let allStationInfoYear = {}
        let paramYear = {startTime: this.yearStartTime, endTime: this.endTime}
        getAllStationBillList(paramYear).then(res => {
          if (res.data.isSuccess === 1) {
            allStationBillYear = res.data.data
            getStationMainOrderList(paramYear).then(res => {
              if (res.data.isSuccess === 1) {
                allStationInfoYear = res.data.data
                _.forEach(allStationBillYear, (item, key) => {
                  if (item.cnt <= 0) {
                    allStationBillYear[key] = allStationInfoYear[key]
                  }
                })
                let obj = {
                  'allStationBillYear': allStationBillYear,
                  'time': moment().format()
                }
                obj = JSON.stringify(obj)
                localStorage.setItem('allStationBillYear', obj)
                this.allStationBillYear = allStationBillYear
              }
            })
          }
        })
      },
      loadMapData () {
        // 加载所有场站点
        let hasLightStation = localStorage.hasOwnProperty('lightStation')
        if (hasLightStation) {
          let obj = JSON.parse(localStorage.getItem('lightStation'))
          let sjd = moment((moment() - moment(obj.time))).minute()
          if (sjd >= 60) {
            localStorage.removeItem('lightStation')
            this.getStatinInfo()
          } else {
            this.drawMyBmap(obj.stationInfo)
          }
        } else {
          this.getStatinInfo()
        }
        // 加载所有场站派单数据（日）
        let hasAllStationBillDay = localStorage.hasOwnProperty('allStationBillDay')
        if (hasAllStationBillDay) {
          let obj = JSON.parse(localStorage.getItem('allStationBillDay'))
          let sjd = moment((moment() - moment(obj.time))).minute()
          if (sjd >= 60) {
            localStorage.removeItem('allStationBillDay')
            this.getStationMainOrderListInfoDay()
          } else {
            this.allStationBillDay = obj.allStationBillDay
          }
        } else {
          this.getStationMainOrderListInfoDay()
        }
        // 加载所有场站派单数据（月）
        let hasAllStationBillMonth = localStorage.hasOwnProperty('allStationBillMonth')
        if (hasAllStationBillMonth) {
          let obj = JSON.parse(localStorage.getItem('allStationBillMonth'))
          let sjd = moment((moment() - moment(obj.time))).minute()
          if (sjd >= 60) {
            localStorage.removeItem('allStationBillMonth')
            this.getStationMainOrderListInfoMonth()
          } else {
            this.allStationBillMonth = obj.allStationBillMonth
          }
        } else {
          this.getStationMainOrderListInfoMonth()
        }
        // 加载所有场站派单数据（年）
        let hasAllStationBillYear = localStorage.hasOwnProperty('allStationBillYear')
        if (hasAllStationBillYear) {
          let obj = JSON.parse(localStorage.getItem('allStationBillYear'))
          let sjd = moment((moment() - moment(obj.time))).minute()
          if (sjd >= 60) {
            localStorage.removeItem('allStationBillYear')
            this.getStationMainOrderListInfoYear()
          } else {
            this.allStationBillYear = obj.allStationBillYear
          }
        } else {
          this.getStationMainOrderListInfoYear()
        }
      },
      getStatinInfo () {
        getStationInfoList().then(res => {
          if (res.data.isSuccess === 1) {
            let obj = {
              'stationInfo': res.data.data,
              'time': moment().format()
            }
            obj = JSON.stringify(obj)
            localStorage.setItem('lightStation', obj)
            this.drawMyBmap(res.data.data)
          }
        })
      },
      drawMyBmap (pointsData) {
        let that = this
        MP(this.ak).then(BMap => {
          if (!BMap) {
            return
          }
          let map = new BMap.Map('allmap', {enableMapClick: false, maxZoom: 18, minZoom: 6})
          that.map = map
          let point = new BMap.Point(parseFloat(that.mapCenterPoint[0]), parseFloat(that.mapCenterPoint[1]))
          let addFun = function () {
            map.zoomTo(map.getZoom() + 1)
            // that.dispatchSearchForm.mapZoom = map.getZoom()
          }
          let reduceFun = function () {
            map.zoomTo(map.getZoom() - 1)
            // that.dispatchSearchForm.mapZoom = map.getZoom()
          }
          let myZoomCtrl = new ZoomControl(addFun, reduceFun)
          map.addControl(myZoomCtrl)
          map.centerAndZoom(point, 7)
          map.enableScrollWheelZoom()
          map.setMapStyle({styleJson: this.BMapStyle})
          let addMarker = (points) => {
            for (let i = 0, len = points.length; i < len; i++) {
              if (points[i].dataStation) {
                let poointBD = bdEncrypt(parseFloat(points[i].dataStation.stationLng), parseFloat(points[i].dataStation.stationLat))
                let point = new BMap.Point(poointBD.bdLng, poointBD.bdLat)
                let pointcolor = ''
                let pointcolorDot = ''
                if (points[i].dataStation.free === '乌鲁木齐货运中心') {
                  pointcolor = that.stationColorAll.wlmq
                  pointcolorDot = 'dot1'
                } else if (points[i].dataStation.free === '哈密货运中心') {
                  pointcolor = that.stationColorAll.hm
                  pointcolorDot = 'dot2'
                } else if (points[i].dataStation.free === '喀什货运中心') {
                  pointcolor = that.stationColorAll.ks
                  pointcolorDot = 'dot4'
                } else if (points[i].dataStation.free === '奎屯货运中心') {
                  pointcolor = that.stationColorAll.kt
                  pointcolorDot = 'dot5'
                } else if (points[i].dataStation.free === '库尔勒货运中心') {
                  pointcolor = that.stationColorAll.kel
                  pointcolorDot = 'dot3'
                } else if (points[i].dataStation.free === '霍尔果斯站') {
                  pointcolor = that.stationColorAll.hrgs
                  pointcolorDot = 'dot6'
                } else if (points[i].dataStation.free === '阿拉山口站') {
                  pointcolor = that.stationColorAll.alsk
                  pointcolorDot = 'dot7'
                }
                let pointSize = 0
                if (+points[i].stationRank === 1) {
                  pointSize = 18
                } else if (+points[i].stationRank === 2) {
                  pointSize = 16
                } else if (+points[i].stationRank === 3) {
                  pointSize = 14
                } else if (+points[i].stationRank === 4) {
                  pointSize = 12
                } else if (+points[i].stationRank === 5) {
                  pointSize = 10
                } else if (points[i].stationRank === 'null') {
                  pointSize = 18
                }
                let titleName = points[i].stationName
                let mySquare = new SquareOverlay(point, pointSize, pointcolor, pointcolorDot, titleName)
                map.addOverlay(mySquare)
                mySquare.addEventListener('click', function (e) {
                  e.stopPropagation()
                  map.panTo(point)
                  that.showStationInfo(points[i])
                })
              }
            }
          }
          addMarker(pointsData)
          map.addEventListener('click', function (e) {
          })
        })
      },
      showStationInfo (stationInfo) {
        let pointcolor = ''
        if (stationInfo.dataStation.free === '乌鲁木齐货运中心') {
          pointcolor = this.stationColorAll.wlmq
        } else if (stationInfo.dataStation.free === '哈密货运中心') {
          pointcolor = this.stationColorAll.hm
        } else if (stationInfo.dataStation.free === '喀什货运中心') {
          pointcolor = this.stationColorAll.ks
        } else if (stationInfo.dataStation.free === '奎屯货运中心') {
          pointcolor = this.stationColorAll.kt
        } else if (stationInfo.dataStation.free === '库尔勒货运中心') {
          pointcolor = this.stationColorAll.kel
        } else if (stationInfo.dataStation.free === '霍尔果斯站') {
          pointcolor = this.stationColorAll.hrgs
        } else if (stationInfo.dataStation.free === '阿拉山口站') {
          pointcolor = this.stationColorAll.alsk
        }
        this.currentStationPoint = stationInfo
        let stationBillDay = this.allStationBillDay[stationInfo.dataStation.stationName]
        let stationBillMonth = this.allStationBillMonth[stationInfo.dataStation.stationName]
        let stationBillYear = this.allStationBillYear[stationInfo.dataStation.stationName]
        let billList = {stationBillDay, stationBillMonth, stationBillYear}
        this.currentBillList = billList
        this.currentStationPointColor = pointcolor
        this.showModel = {
          topHeaderShow: true,
          stationInfoDetailShow: false,
          searchInputShow: true,
          mapTitleShow: true,
          selectDataShow: true,
          stationFreesDataTableShow: false,
          freightCenterDataTableShow: false,
          stationInfoShow: true,
          mapShow: true
        }
      }
    },
    mounted () {
      this.loadMapData()
      hw.setFullHeightAllWith('stationMap', 35, (height) => {
        this.layoutHeight = height
      })
    },
    watch: {},
    computed: {},
    components: {topHeader, mapTitle, freightCenterDataTable, selectData, searchInput, stationFreesDataTable, stationInfo, stationInfoDetail}
  }
</script>
<style>
  #stationMap * {
    -webkit-backface-visibility: hidden;
  }

  /*地图缩放按钮样式*/
  .addButton, .minusButton {
    width: 33px;
  }

  .addButton:hover {
    background-color: #1C4364;
  }

  .minusButton:hover {
    background-color: #1C4364;
    border-bottom: 1px solid #225D92;
  }

  /*点闪烁css*/
  .dot1:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #44C0FF;
    border-radius: 50%;
  }

  .dot1:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #44C0FF;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot2:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #FB943A;
    border-radius: 50%;
  }

  .dot2:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #FB943A;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot3:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #A1BF50;
    border-radius: 50%;
  }

  .dot3:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #A1BF50;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot4:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #DD2037;
    border-radius: 50%;
  }

  .dot4:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #DD2037;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot5:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #24C4A0;
    border-radius: 50%;
  }

  .dot5:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #24C4A0;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot6:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #A889F9;
    border-radius: 50%;
  }

  .dot6:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #A889F9;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  .dot7:before {
    content: ' ';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background-color: #F3E886;
    border-radius: 50%;
  }

  .dot7:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    background-color: #F3E886;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
    -webkit-backface-visibility: hidden;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 1s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  @keyframes ripple {
    0% {
      left: 5px;
      top: 5px;
      opcity: 1;
      width: 0;
      height: 0;
    }
    100% {
      left: -15px;
      top: -15px;
      opacity: 0;
      width: 50px;
      height: 50px;
    }
  }
</style>
